<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
  </ul>
  <script>

    // 1. set
    // 1.1 声明 一个set 
    let set = new Set(['theshy','ning','rookie']);

    // 1.2 set 里的方法
    // size     元素个数
    // add      在末尾添加新的元素 
    // delete   删除指定元素 参数: 属性值  返回值 布尔值 是否移除成功
    // clear    清空 返回一个布尔值，表示该值在 Set 中存在与否。
    // has      是否存在该元素

    console.log(set.size);

    set.add('jackeylove')
    console.log(set);

    set.delete('ning')
    console.log(set);

    // set.clear()
    // console.log(set);

    console.log(set.has('theshy'));


    // 2.map  map是一个对象
    // Map 对象保存键值对，并且能够记住键的原始插入顺序。任何值（对象或者基本类型）都可以作为一个键或一个值。

    // 2.1 创建一个map
    // let map = new Map();
    // map.set("myname", "张三");
    // console.log(map);


    // 2.2直接创建map结构
    let map = new Map([["name", "张三"], ["age", 20], ["height", "178cm"]]);
    // console.log(map); 

    // 2.3 map里的方法 
    // size  元素个数 
    // set   添加元素  参数有两个  第一个是键名 第二个是键值 
    // delete  删除 移除指定的键值对
    // clear   移除所有的键值对 
    // has  是否存在某个元素 
    // get  获取某个元素 set数据结构里没有这个方法

    // console.log(map.size); // 长度为3

    // map.delete("name")   // 删除 name这个元素
    // console.log(map); 
    // console.log(map.delete("name")); // 删除这个元素是否成功 返回的是布尔值

    // map.clear(); // 全部被删除
    // console.log(map);

    // console.log(map.has("name")); // 返回的是布尔值

    // console.log(map.keys()); // 获取元素名
    // console.log(map.values()); // 获取元素值


    // 2.4 把元素作为键名 
    // let lis = document.querySelectorAll("li");
    // let map = new Map();
    // map.set(lis[0], "red");
    // map.set(lis[1], "blue");
    // map.set(lis[2], "yellow");
    // map.forEach((item, key) => {
    //   key.style.color = item;
    // })

    // 3.set 和 map 都用for...of 遍历

    // 3.1 遍历set
    // for( let key of set){
    //   console.log(key);
    // }

    // 3.2 遍历map  
    for(let key of map){
      console.log(key);
    }

    // 对key解构赋值
    for(let [key,val] of map){
      console.log(key,val);
    }

    // 扩展: 对象长度 怎么查看
    /*
    let obj = {name:"张三",age:20}
    let count = 0;
    for(let key in obj){
        count++
    }
    console.log(count); */

  </script>
</body>

</html>